<template>
  <div class="chart-wrap flex-column h-100">
    <echart-line
      id="afs-line"
      ref="afsLine"
      :styles="{ width: '100%', height: '300px', 'text-align': 'center' }"
      :data="lineData"
      :event-list="eventList"
    />
    <div>事件点可点击</div>
  </div>
</template>
<script>
import lineData from "./data/line.js";
import EchartLine from "@/components/echart/echart-line";
export default {
  components: {
    EchartLine,
  },
  data() {
    return {
      lineData: [],
      eventList: [],
    };
  },
  mounted() {
    this.handleData();
  },
  methods: {
    handleData() {
      console.log(lineData);
      this.lineData = lineData.map((e1) => {
        const arr = [];
        e1.dataList.some((e2, index2) => {
          arr.push({
            value: [e1.samplePrecision * index2.toFixed(3), e2.toFixed(3)],
          });
          if (e1.samplePrecision * index2 > e1.testParam.testRange) {
            return true;
          }
        });
        this.eventList.push(e1.eventList)
        return {
          type: "line",
          showSymbol: false,
          data: arr,
          name: `${e1.deviceId}（${e1.portName}）`,
        };
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.chart-wrap {
  background: #020721;
}
</style>
